<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <div>
      <!-- 图片，用来展示用户选择的头像 -->
      <img :src="imgUrl" v-if="imgUrl" alt="" class="preview" />
      <img  src="../../../assets/images/avatar.jpg"    v-else  alt=""  class="preview"  />
      <!-- 按钮区域 -->
      <div class="btn-box">
        <input  type="file"  style="display: none"  ref="getImg"  @change="chooseImg"  />
        <el-button  type="primary"  icon="el-icon-plus"  @click="$refs.getImg.click()"  >选择图片</el-button >
        <el-button type="success" icon="el-icon-upload" :disabled =" imgUrl==='' " @click="updataImg" >上传头像</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "UserAvatar",
  data() {
    return {
      imgUrl: "",
    };
  },
  methods: {
  async  updataImg(){
      const {data:res} = await this.$axios.patch('/my/update/avatar',{avatar:this.imgUrl})
      if(res.code !==0 )return this.$message.error(res.message)
       this.$message.success(res.message)
       this.imgUrl=''
       this.$store.dispatch('updataUserInfo')
    },
    chooseImg(e) {
      // console.log(e);
      // e.target.file
      // console.log(e.target.files);
      const files = e.target.files;
      if (files.length) {
        // console.log(files[0]);
        if (files.length !== 0) {
          // 选择了图片
          // 利用js中内置函数进行图片处理
          // 创建FileReader对象
          const reader = new FileReader();
          // 调用readAsDataURL函数读取文件内容
          reader.readAsDataURL(files[0]);
          // 监听onload事件，读取完成触发回调函数
          reader.addEventListener("load", () => {
            //获取到base64字符串，存储到data中
            // result 转化 base64
            this.imgUrl = reader.result;
          });}
      }
         else {
          console.log(1);
         this.imgUrl =''
        }
    },
  },
};
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
  width: 350px;
  height: 350px;
}
</style>